<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box div{
			
			width:100% ;
			height: 400px;
			background: url(./a1.jpg) no-repeat ;
			background-size: cover;
			background-image:url(./a1.jpg)  ;
			inset: 0;
			position: absolute;
			animation: move 10s linear infinite alternate;
		}
		@keyframes move {
			0%{
				background: url(./a1.jpg) no-repeat ;
				background-size: cover;

			}
			25%{
				background: url(./a2.jpg) no-repeat ;
				background-size: cover;

			}
			50%{
				background: url(./a3.jpg) no-repeat ;
				background-size: cover;
			}
			100%{
				background: url(./a4.jpg) no-repeat ;
				background-size: cover;
			}
		}
	</style>
</head>
<body>
	<div class="box">
		<div></div>
	</div>
</body>
</html>